<template>
  <div v-if="scrollList.length > 0" class="scrollWrap">
    <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
      <li v-for="(item, index) in scrollList" :key="index" :title="(item.name || 'xxx') + '，' + item.satusName">{{ item.name || 'xxx' }}，{{ item.satusName }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { TASK_STATUS } from '@/utils/dictionary'
import { getInspectionList } from '@/api/air-data'
let scrollTimer = null
onMounted(() => {
  getScrollList()
  scrollTimer = setInterval(() => {
    getScrollList()
  }, 2000)
})
const scrollList = ref([])
function getScrollList() {
  getInspectionList().then(res => {
    if (res.code === 0) {
      scrollList.value = res.data || []
      handleStatus()
      if (scrollList.value.length === 0) {
        clearInterval(scrollTimer)
      }
    }
  })
}
function handleStatus() {
  if (scrollList.value.length > 0) {
    scrollList.value.forEach(item => {
      TASK_STATUS.forEach(t => {
        if (item.status === t.value) {
          item.satusName = t.label
        }
      })
    })
  }
}
const animateUp = ref(false)
let timer = null
function scrollAnimate() {
  animateUp.value = true
  if (scrollList.value.length > 0) {
    setTimeout(() => {
      scrollList.value.push(scrollList.value[0])
      scrollList.value.shift()
      animateUp.value = false
    }, 500)
  }
}

if (scrollList.value.length > 1) {
  timer = setInterval(scrollAnimate, 1500)
}

onUnmounted(() => {
  clearInterval(timer)
  clearInterval(scrollTimer)
})
</script>
<style lang="scss" scoped>
.scrollWrap{
  position: absolute;
  width: 400px;
  height: 48px;
  background: rgba(53, 62, 59, .8);
  border-radius: 2px;
  top: 5px;
  right: 25%;
  overflow: hidden;
  .marquee-list {
    li {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      list-style: none;
      line-height: 48px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      color: #fff;
      cursor: pointer;
    }
  }
}
.animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-48px);
  }

</style>
